export function appCode(name="App",params="") {//创建模块
    return `
        <span class=code-keyword>const</span>
        ${name}:
        <span class=code-keyword>FC&lt;any></span>
        <span class=code-punctuation>=</span>
        <span class=code-punctuation>(</span>${params}<span class=code-punctuation>)</span>
        <span class=code-punctuation>=></span>
        <span class=code-punctuation>{</span>
    `
}

export function textIndent(content) {//段落缩进内容
    return `<div class=text-indent>${content}</div>`
}

export function importReact(content,packName='react') {//react导入内容
    return `
        <span class=code-keyword>import</span>
        <span class=code-punctuation>{</span>
        ${content}
        <span class=code-punctuation>}</span>
        <span class=code-keyword>from</span>
        <span class=code-attr-name>'${packName}';</span>
        <br />
    `
}
export function returnTagContent(tagName, content) {//返回单个标签内容
    return `
        <span class=code-tag>
        return <span class=code-punctuation><</span>${tagName}${content}<span class=code-punctuation>></span><span class=code-punctuation>&lt;&#47;</span>${tagName}<span class=code-punctuation>></span>
        </span>
    `
}
export function returnCustomContent(content) {//返回自定义标签内容
    return `
        <span class=code-tag>return</span>
        <span class=code-punctuation>(</span>
        ${textIndent(`
            <>
            ${textIndent(content)}
            &lt;/>
        `)}
        <span class=code-punctuation>)</span>
    `
}

export function tagContent(tagName, content,name='') {//标签内容
    return `
    <span class=code-tag>
        <span class=code-punctuation><</span>${tagName}${content}<span class=code-punctuation>><span class=code-def>${name}</span></span><span class=code-punctuation>&lt;&#47;</span><span class=code-tag>${tagName}</span><span class=code-punctuation>></span>
    </span>
`
}

export function userState(name, setName, type, val) {//userState内容
    return `
        <span class=code-keyword>const</span>
        <span class=code-punctuation>[</span>
        ${name},
        ${setName}
        <span class=code-punctuation>]</span>
        <span class=code-punctuation>=</span>
        <span class=code-method>useState</span><span class=code-keyword>${type}></span><span class=code-punctuation>(</span>${val}<span class=code-punctuation>)</span>
    `
}
export function formsState(name) {//userState内容
    return `
        <span class=code-keyword>const</span>
        <span class=code-punctuation>[</span>
        ${name}
        <span class=code-punctuation>]</span>
        <span class=code-punctuation>=</span>
        <span class=code-method>Form.useForm</span><span class=code-keyword></span><span class=code-punctuation>(</span><span class=code-punctuation>)</span>
    `
}
export function useEffect(content,name="useEffect",end="[]") {//useEffect内容
    return `
        <span class=code-method>${name}</span><span class=code-punctuation>(</span><span class=code-keyword>()</span>
        <span class=code-keyword>=></span>
        <span class=code-punctuation>{</span>
        <br />
        ${content}
        <span class=code-punctuation>},<span class=code-def>${end}</span><span class=code-punctuation>)</span>;</span>
    `
}


export function addEvtLis(target, name, fnName) {//ReaactaddEventListener内容
    return `
        ${target}.<span class=code-keyword>current?</span>.<span class=code-attr-name>addEventListener</span><span class=code-punctuation>(</span>'${name}',
        <span class=code-attr-name>${fnName}</span><span class=code-punctuation>)</span>
    `
}
export function refAttr(target, name,val) {//ReaactaddEventListener内容
    return `
        ${target}.<span class=code-keyword>current</span>.<span class=code-attr-name>${name}</span>
        = ${val}
    `
}
export function removeEvtLis(target, name, fnName) {//removeEventListener内容
    return `
        ${target}.<span class=code-keyword>current?</span>.<span class=code-attr-name>removeEventListener</span><span class=code-punctuation>(</span>'${name}',
        <span class=code-attr-name>${fnName}</span><span class=code-punctuation>)</span>
    `
}
export function addVEvtLis(target, name, fnName) {//VueaddEventListener内容
    return `
    <span class=code-this>this</span>.$refs.${target}.<span class=code-attr-name>addEventListener</span><span class=code-punctuation>(</span>'${name}',
    <span class=code-this>this</span>.<span class=code-attr-name>${fnName}</span>.<span class=code-keyword>bind</span><span class=code-punctuation>(</span><span class=code-this>this</span><span class=code-punctuation>)</span><span class=code-punctuation>)</span>
    `
}
export function returnFn(content) {
    return `
        <span class=code-tag>return</span>
        ()
        <span class=code-keyword>=></span>
        <span class=code-punctuation>{</span>
        <br />
        ${content}
        <span class=code-punctuation>};</span>
    `
}
export function returnAttr(name, content) {
    return `<span class=code-keyword>${name}</span>(<span class=code-punctuation>(</span>item:<span class=code-keyword>any</span><span class=code-punctuation>)</span>
        <span class=code-keyword>=></span>
        ${content})`
}
export function returnVAttr(name, content) {
    return `<span class=code-keyword>${name}</span>(item
        <span class=code-keyword>=></span>
        ${content})`
}
export function fnBox(name, val, content,type="any") {//function内容
    return `
        <span class=code-keyword>function</span>
        <span class=code-attr-name>${name}</span><span class=code-punctuation>(</span>${val ? val + ":<span class=code-keyword>"+type+"</span>" : ""}<span class=code-punctuation>)</span>
        {
        <br />
        ${textIndent(content)}
        }
    `
}
export function vfnBox(name, content, val = '') {//vue function内容
    return `
        <span class=code-attr-name>${name}</span><span class=code-punctuation>(</span>${val}<span class=code-punctuation>)</span>
        {
        <br />
        ${textIndent(content)}
        },
    `
}
export function templateBox(content) {//template内容
    return `
        <span class=code-punctuation><</span><span class=code-tag>template</span><span class=code-punctuation>></span>
        ${textIndent(content)}
        <span class=code-punctuation>&lt;&#47;</span><span class=code-tag>template</span><span class=code-punctuation>></span>
    `
}

export function scriptBox(data="", mounted="", methods="",imports="") {//Vue scriptBox模板内容
    return `
    <span class=code-punctuation><</span><span class=code-tag>script</span><span class=code-punctuation>></span>
    <br />
    ${imports?imports:""}
    <span class=code-tag>export default</span>
    {
    ${textIndent(`
        <span class=code-method>data</span><span class=code-punctuation>()</span>
        {
            ${textIndent(`
            <span class=code-tag>return</span>
            {
                ${textIndent(data)}
            }
            `)}
        },
        <br />
        <span class=code-method>mounted</span><span class=code-punctuation>()</span>{
            ${textIndent(mounted)}
        },
        <br />
        <span class=code-method>methods</span>:{
            ${textIndent(methods)}
        }
    `)}
    }
    <br />
    <span class=code-punctuation>&lt;&#47;</span><span class=code-tag>script</span><span class=code-punctuation>></span>
    `
}